<template>
  <div class="app-container" style="margin-left: 20px">
    <div class="filter-container">
      <el-select v-model="listQuery.group_name" clearable placeholder="业务线" @change="getProjectN">
        <el-option v-for="item in group_namelist" :key="item.group_name" :label="item.group_name" :value="item.group_id" />
      </el-select>
      <el-select v-model="listQuery.project_id" style="margin-left: 20px" clearable placeholder="项目" @change="getVersionN">
        <el-option v-for="item in project_namelist" :key="item.project_name" :label="item.project_name" :value="item.project_id" />
      </el-select>
      <el-select
        v-model="listQuery.version"
        clearable
        style="margin-left: 20px"
        placeholder="版本号"
        class="version"
        @change="handleFilter"
      >
        <el-option
          v-for="item in version_list"
          :key="item.project_version_name"
          :label="item.project_version_name"
          :value="item.project_version_name"
        />
      </el-select>
      <span style="font-size:15px;font-weight:bold;margin-left:10px;color: dodgerblue;" class="mark">此项目版本bug解决时间平均值为:{{ average_time }}</span>
    </div>

    <el-table :key="tableKey" v-loading="listLoading" :header-cell-style="{ background: 'dodgerblue', color: '#eeeeee' }" :data="list" fit highlight-current-row style="width: 100%">
      <el-table-column label="bug编号" align="center" width="150">
        <template slot-scope="{ row }">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column type="expand" show-overflow-tooltip label="bug摘要" width="80px" header-align="center" align="left">
        <template slot-scope="{ row }">
          <span>{{ row.summary }}</span>
        </template>
      </el-table-column>
      <el-table-column label="处理人" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.user_realname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.status }}</span>
        </template>
      </el-table-column>

      <el-table-column label="报告日期" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.date_submitted }}</span>
        </template>
      </el-table-column>

      <el-table-column label="最后更新" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.last_updated }}</span>
        </template>
      </el-table-column>
      <el-table-column label="花费时间" align="center">
        <template slot-scope="{ row }">
          <span> {{ row.take_time }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page_num" :limit.sync="listQuery.page_per" @pagination="getList" />
  </div>
</template>
<script>
import { Message } from 'element-ui'
import { bugTimeFinish } from '@/api/quality_visualization'
import { getGroupName, getProjectName } from '@/api/report'
import { projectVersionName } from '@/api/bug-calculate'
import Pagination from '@/components/Pagination'

export default {
  name: 'ComplexTable',
  components: {
    Pagination
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      average_time: 0,
      edit: false,
      listLoading: true,
      listQuery: {
        project_id: '',
        version: '',
        page_num: 1,
        page_per: 10
      },
      group_namelist: '',
      project_namelist: '',
      version_list: ''
    }
  },
  created() {
    this.getList()
    this.getGroupN()
  },
  methods: {
    getList() {
      this.listLoading = true
      bugTimeFinish(this.listQuery).then((response) => {
        this.list = response.data.items
        this.total = response.data.total
        this.average_time = response.data.average_time
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 0.5 * 1000)
      }).catch((err) => {
        Message.error(err.msg || err.message || err.value)
      })
    },
    getGroupN() {
      getGroupName()
        .then((res) => {
          this.group_namelist = res.data
        })
        .catch((error) => {
          Message.error(error.msg || error.message || error.value)
        })
    },
    getProjectN(groudId) {
      // groudId && (this.listQuery.project_name = '')
      if (!groudId) {
        this.project_namelist = ''
        this.listQuery.project_id = ''
        this.version_list = ''
        this.listQuery.version = ''
        this.getList()
        return
      }
      getProjectName(groudId)
        .then((res) => {
          this.project_namelist = res.data
        })
        .catch((error) => {
          Message.error(error.msg || error.message || error.value)
        })
    },
    handleFilter(groudId) {
      this.listQuery.page_num = 1
      this.listQuery.page_per = 10
      this.getList()
    },
    getVersionN(projectId) {
      if (!projectId) {
        this.version_list = ''
        this.listQueryBugByDays.version_name = ''
        return
      }
      projectVersionName(projectId)
        .then((res) => {
          this.version_list = res.data
        })
        .catch((error) => {
          Message.error(error.msg || error.message || error.value)
        })
    }
  }
}

</script>
